<template>
    <div class="el-card box-card ">
     <div class="el-card_header">
       <div class="clearfix">
         <span>试听转化率</span>
         <!-- 下拉 -->
         <el-select v-model="value" placeholder="近15天">
         <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
         </el-option>
         </el-select>
       </div>
     </div>
     <div class="el-card_body" ref="box"></div>
    </div>
 </template>
 
 <script setup>
 import { ref, reactive, toRefs, onMounted} from 'vue'
 import echarts from "echarts";
 
 let options=[{ 
           value: '选项1',
           label: '近一周'
         }, {
           value: '选项2',
           label: '近15天'
         }, {
           value: '选项3',
           label: '近30天'
         }, {
           value: '选项4',
           label: '自定义'
         }
 ] 
           
  let value=ref('')     
 
  let box=ref(null)
  let myechart
 onMounted(()=>{ 
   myechart=echarts.init(box.value)
     renderChart()
 });
 const renderChart=()=>{ 
   const options={ 
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },

  series: [
    {
      name: 'Funnel',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      color:['#98da8f','#00a4af','#00AA55','#99DD00'],
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 80, name: '预约试听' },
        { value: 60, name: '试听到课率' },
        { value: 40, name: '完成试听' },
        { value: 20, name: '成交率' },
        
      ]
    }
  ]
};

myechart.setOption(options);

 }
 
 
 </script>
 <style scoped lang="scss">
 .el-card{ 
   background-color: transparent;
   border-radius: 4px;
     border: 1px solid #e6ebf5;
     background-color: #fff;
     color: #303133;
     
     
     .el-card_header{ 
       height: 65px;
     padding: 18px 20px;
     border-bottom: 1px solid #e6ebf5;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     }
     .el-select{ 
       margin-left: 10px;
     }
     .el-card_body{ 
       height: 400px;
       width: 550px;
     }
 }
 
 
 
 </style>